<template>
  <view class="buy2">
    <view class="txt1">
      <view class="name"> 汇添富双利债劵A(470018) </view>
      <view class="attentio">
        <view> 中高风险 </view><view> 混合型 </view>
      </view>
    </view>
    <view class="txt2">
      <view class="sum">
        <view> 定投金额 </view> <view class="rule"> 交易规则 </view>
      </view>

      <view class="input">
        <input type="text" value="400" />

        <image
          src="../../../static/iamges/dingqihuangjin/caca.png"
          mode=""
        ></image
      ></view>

      <view class="cost">
        预计申购费: <view>0.18～0.63元</view>(申购费率0.15%)</view>

      <view class="cost">
        实际扣款金额为: <view>120.00～420.00元</view>,如何计算扣款？</view>
    </view>
    <view class="txt3">
    <view>
		<view class="left"> 定投方式</view>
		<view class="right"> 小目标定投    <image
          src="../../../static/iamges/maichu/fanhui@2x.png"
          class="image"
         ></image> </view> 
	</view>

    <view> 
		<view> 给自己定个小目标 </view>
		<view class="modification"> 修改 </view>
	 </view>

    </view>

    <view class="txt4">
      <view>
        <view class="left"> 付款方式 </view>
        <view class="right">
          <view>
            <view>中国工商银行电子户(尾号3631)</view>
            <view>最多支付30000.00元</view>
          </view>
          <image
            src="../../../static/iamges/maichu/fanhui@2x.png"
           class="image"
          ></image>
        </view>
      </view>

      <view class="line"> </view>

       <view>
        <view class="left"> 定投周期 </view>
        <view class="right">
          <view class="cycle">
            <view>每周</view>
            <view>周三</view>
          </view>
          <image
            src="../../../static/iamges/maichu/fanhui@2x.png"
           class="image"
          ></image>
        </view>
      </view>
    </view>

    <view class="label">
      <checkbox-group @change="add">
        <label>
          <checkbox />我已阅读<text>《服务协议》</text>,理解其内容并承担相关风险</label
        >
      </checkbox-group>
    </view>
    <view class="button">
      <button>立即购买</button>

      <view> 基金销售服务由惠通金融服务有限公司提供 </view>
      <view> 基金有风险，透支需谨慎 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.buy2 {
  background-color:  #fafafa;
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #cdcdcd;
  .txt1 {
    font-size: 32rpx;
    color: #333333;
    padding-bottom: 40rpx;
    .name {
      padding: 24rpx 0;
    }
    .attentio {
	  display: flex;
	  color: #f7adb4;
      view {
		  padding: 6rpx;
        margin-right: 30rpx;
     border-radius: 10rpx;
        background-color: #ff4658;
      }
    }
  }
  .txt2 {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 32rpx 40rpx 8rpx;
    font-size: 36rpx;
    color: #333333;
    .sum {      display: flex;
      justify-content: space-between;
      padding-bottom: 40rpx;

      .rule {
        font-size: 28rpx;
        color: #333333;
      }
    }
    .input {      display: flex;
      justify-content: space-between;
      padding-bottom: 48rpx;
      display: flex;
      align-items: center;
      font-size: 46rpx;

      image {
        height: 20rpx;
        width: 20rpx;
      }
	}
	.cost{
		display: flex;
		font-size: 24rpx ;
		color: #999999;
		padding-bottom: 24rpx;
		view{
			color: #ff4658;
		}
	}
  }
  .txt3{
	  background-color: #ffffff;margin-top: 40rpx;
	  padding: 10rpx 20rpx ;
	  padding-right: 36rpx;
	  >view{
		  display: flex;
		  justify-content: space-between;
		  padding-top: 40rpx;
		  align-items: center;
		  .left{
			  color: #333333;
			  font-size: 36rpx;
		  }
		.right{
			font-size: 28rpx;
			color: #777777;
		}
		  
		  .modification{
			  font-size: 32rpx;color: #ff4658;
		  }
	  }
  }
  .txt4{
	  background-color: #ffffff;
	  border-radius: 16rpx;
	  margin-top: 40rpx;
	  padding: 40rpx 36rpx 32rpx;
	  >view{
		  display: flex;justify-content: space-between;
		    .left{
		  color: #333333;
		  font-size: 36rpx;
	  }
	  .right{
		  display: flex;
		  align-items: center;
		 >view{
			 display: flex;
			 flex-direction: column;
			 align-items: flex-end;
		 }
		 .cycle{
			 color: #777777;
			 font-size: 28rpx;
			 flex-direction: row;
			 >view{
			 padding-left: 10rpx;
			 }
		 }
	  }
	 
	  } .line{
		  border-top: 2rpx solid #cdcdcd;
		  margin: 38rpx 0;
	  }
	
  }
  .label{
	  padding: 10rpx;
	  text{
		  color: #333333;
	  }
  }
  .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    color: #cdcdcd;
    padding: 0;
    button {
      height: 94rpx;
      background-color: #ff4658;
      color: #ffffff;
      border-radius: 16rpx;
      width: 702rpx;
      margin-bottom: 40rpx;
    }
  }
  .image {
      width: 10rpx;
      height: 20rpx;
      padding-right: 16rpx;
      transform: scaleX(-1);
    }
}
</style>
